<template>
	<div class="content">
		<div class="input size">
			<el-row class="demo-autocomplete">
				<!-- style="align-items: flex-end" -->
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="用户邮箱" :label-width="formLabelWidth">
							<el-input v-model="Users.query.email" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="用户昵称" :label-width="formLabelWidth">
							<el-input v-model="Users.query.nickname" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="内部订单号" :label-width="formLabelWidth">
							<el-input v-model="Users.query.orderno" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="第三方订单号" :label-width="formLabelWidth">
							<el-input v-model="Users.query.outOrderno" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
			<el-row class="demo-autocomplete">
				<!-- style="align-items: flex-end" -->
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="开始时间" :label-width="formLabelWidth">
							<el-input v-model="Users.query.startDate" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="结束时间" :label-width="formLabelWidth">
							<el-input v-model="Users.query.endDate" autocomplete="off" placeholder="请输入内容" style="width: 100%;"></el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="状态" :label-width="formLabelWidth">
							<el-select v-model="Users.query.state" placeholder="下拉选择">
								<el-option v-for="item in ztopent" :key="item.vlaue" :label="item.name" :value="item.vlaue">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="5" class="inpt_in">
					<el-form class="demo-form-inline">
						<el-form-item label="支付类型" :label-width="formLabelWidth">
							<el-select v-model="Users.query.payChannel"  placeholder="下拉选择">
								<el-option v-for="item in zfopnet" :key="item.id" :label="item.payName" :value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="2" class="inpt_in">
					<el-button style="width: 5vw;" type="primary" @click="clickPayme">搜索</el-button>
				</el-col>
			</el-row>
		</div>
		<div class="boder">
			<el-row>
				<el-table :data="OrderTabele" border style="width: 100%" :header-cell-style="{'text-align':'center','color':'rgba(0,0,0,0.85)'}"
				 stripe>
					<el-table-column prop="nickname" label="用户昵称" width="140" align="center">
					</el-table-column>
					<el-table-column prop="email" label="用户邮箱" width="140" align="center">
					</el-table-column>
					<el-table-column prop="orderno" label="内部订单号" width="140" align="center">
					</el-table-column>
					<el-table-column prop="outOrderno" label="第三方订单号" width="140" align="center">
					</el-table-column>
					<el-table-column prop="payType" label="支付类型" width="140" align="center">
					</el-table-column>
					<el-table-column prop="payName" label="支付渠道" width="140" align="center">
					</el-table-column>
					<el-table-column prop="money" label="充值金额" width="140" align="center">
					</el-table-column>
					<el-table-column prop="realMoney" label="实收金额" width="140" align="center">
					</el-table-column>
					<el-table-column prop="charge" label="手续费" width="140" align="center">
					</el-table-column>
					<el-table-column prop="rate" label="费率" width="140" align="center">
					</el-table-column>
					<el-table-column prop="creatTime" label="创建时间" width="170" align="center">
					</el-table-column>
				</el-table>
			</el-row>
			<el-pagination background layout="prev, pager, next,total" :page-count="getDataDs.pageCount" @current-change="handleCurrent">
			</el-pagination>
		</div>
	</div>
</template>
<script>
	import api from '../../../api/PurchaseDelivery/index.js'
	export default {
		data() {
			return {
				formLabelWidth: '6vw',
				getDataDs: {
					"currentPage": 1,
					"pageSize": 5,
					"total": 100,
					"pageCount": 0,
					"query": {
						"product_type": 1,
						"name": "",
						"type": "",
						"state": ""
					}
				},
				ztopent: [{
					"name" : "全选",
					"vlaue" : null
				},{
					"name" : "未支付",
					"vlaue" : 1
				},{
					"name" : "已支付",
					"vlaue" : 2
				},{
					"name" : "异常",
					"vlaue" : 3
				}],
				zfopnet:[{
					"name" : "全选",
					"vlaue" : null
				},{
					"name" : "9A支付",
					"vlaue" : 1
				},{
					"name" : "静轩支付",
					"vlaue" : 2
				}],
				Users: {
					"currentPage": 1,
					"pageSize": 2,
					"query": {
						"email": "",
						"nickname": "",
						"orderno": "",
						"outOrderno": "",
						"state": "",
						"payChannel": "",
						"startDate": "",
						"endDate": ""
					}
				},
				OrderTabele: []
			}
		},
		created() {
			this.$axios.post(`${api}/gamemall/paySetting/getList`, {
					"state": 1
				})
				.then(res => {
					this.zfopnet = res.data
					console.log(res.data)
				})
				.catch(err => {
					// this.$message({
					// 	message: '请求异常',
					// 	type: 'warning'
					// })
				});
			this.$axios.post(`${api}/gamemall/payOrder/searchListByQuery`,this.Users)
				.then(res => {
					this.OrderTabele = res.data.list
					this.getDataDs.total = res.data.total;
					this.getDataDs.pageCount = res.data.pages;
					for(let i =0; i<this.OrderTabele.length; i++) {
						this.OrderTabele[i].payType = this.OrderTabele[i].payType == 1? "支付宝":"微信"
					}
					console.log(this.OrderTabele)
				})
				.catch(err => {
					// this.$message({
					// 	message: '请求异常',
					// 	type: 'warning'
					// })
				});
		},
		methods: {
			PaymentSearch() {
				this.$axios.post(`${api}/gamemall/payOrder/searchListByQuery`,this.Users)
					.then(res => {
						console.log(res.data)
						if(res.code == 200) {
							this.OrderTabele = res.data.list
							this.getDataDs.total = res.data.total;
							this.getDataDs.pageCount = res.data.pages;
							for(let i =0; i<this.OrderTabele.length; i++) {
								this.OrderTabele[i].payType = this.OrderTabele[i].payType == 1? "支付宝":"微信"
							}
							console.log(this.OrderTabele)
						}
						if(res.code == 500) {
							this.OrderTabele = []
							console.log(this.OrderTabele)
						}
					})
					.catch(err => {
						// this.$message({
						// 	message: '请求异常',
						// 	type: 'warning'
						// })
					});
			},
			clickPayme() {
				this.getDataDs.pageCount = 0
				this.PaymentSearch()
			},
			handleCurrent(pageNumber) {
				this.getDataDs.currentPage = pageNumber;
				console.log(this.getDataDs.currentPage)
				this.PaymentSearch()
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 99%;
		height: 99%;
		margin-left: 0.5%;
		border: 1px solid #EBEEF5;
		background-color: #FFF;
		border-radius: 0.325rem;
	}

	.inpt_in {
		margin-top: 3%;
	}

	.boder {
		width: 98%;
		height: 75%;
		border: 1px solid #EBEEF5;
		margin-top: 2%;
		margin-left: 1%;
	}

	.size {
		font-size: 0.8rem;
		color: #606266;
	}
</style>
